/* stylelint-disable */
@import '../themes/variable';

@mixin motion-common($duration: $animation-duration-base) {
  animation-duration: $duration;
  animation-fill-mode: both;
}

@mixin motion-common-leave($duration: $animation-duration-base) {
  animation-duration: $duration;
  animation-fill-mode: both;
}

@mixin make-motion($className, $keyframeName, $duration: $animation-duration-base) {
  .#{$className}-enter,
  .#{$className}-appear {
    @include motion-common($duration);
    animation-play-state: paused;
  }
  .#{$className}-leave {
    @include motion-common-leave($duration);
    animation-play-state: paused;
  }
  .#{$className}-enter.#{$className}-enter-active,
  .#{$className}-appear.#{$className}-appear-active {
    animation-name: #{$keyframeName}+#{"In"};
    animation-play-state: running;
  }
  .#{$className}-leave.#{$className}-leave-active {
    animation-name: #{$keyframeName}+#{"Out"};
    animation-play-state: running;
    pointer-events: none;
  }
}
